<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript">if(/android (\d+\.\d+)/.test(navigator.userAgent.toLowerCase())){var version=parseFloat(RegExp.$1);if(version>2.3){var phoneScale=parseInt(window.screen.width)/750;document.write('<meta name="viewport" content="width=750,minimum-scale='+phoneScale+",maximum-scale="+phoneScale+',target-densitydpi=device-dpi">')}else document.write('<meta name="viewport" content="width=750,target-densitydpi=device-dpi">')}else document.write('<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi,minimal-ui">');</script>
	<title>Document</title>
	<style>
		html{width:100%;height:100%;overflow: hidden;}
		body{
			width: 750px;
			height: 1206px;
			overflow: hidden;
			margin:0;
			position: relative;
		}
		.video{
			 width: 100%;
			 position: absolute;
			 height:100%; 
			 left:0;
			 bottom:0;
			 z-index:100;
		}
		.IIV::-webkit-media-controls-play-button,
		.IIV::-webkit-media-controls-start-playback-button {
		    opacity: 0;
		    pointer-events: none;
		    width: 0px;
		}

		a{
			position: absolute;
			display: block;
			width: 200px;
			height: 60px;
			line-height: 60px;
			border: 1px solid #666;
			border-radius: 8px;
			text-align: center;
			font-size: 30px;
			color:red;
			text-decoration: none;
			top:50%;
			left:50%;
			margin-left: -100px;
		}
	</style>
</head>
<body>
	<a href="javascript:;">点我播放</a>
	<video class="video" id="video" width="750" height="1230"  src="video.mp4" preload="metadata" playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" x-webkit-airplay="true" webkit-playsinline></video>
	<script type="text/javascript" src="js/iphone-inline-video.min.js"></script>
	<script type="text/javascript">
		var video = document.querySelector('video');
		enableInlineVideo(video);
		document.body.addEventListener('touchstart',function(){
			video.play()
		})

	</script>
</body>

</html>